  <!-- 商品编辑页面-->
<template>
  <!-- direction="vertical" 设置元素的垂直方向布局   “style scoped”确保了 CSS 只作用于当前组件-->
  <el-container direction="vertical" style scoped>
    <el-row style="width: 100%; background-color: #b7cee5">
      <el-col :span="1"
        ><img
          src="../assets/images/NO1.jpg"
          alt=""
          style="margin: 30px 30px; width: 70px; height: 70px"
      /></el-col>
      <el-col :span="19"
        ><h2
          style="
            color: #4f7298;
            font-family: cursive;
            font-size: 30px;
            margin: 50px 30px;
          "
        >
          雅黛美妆海外免税购管理员系统
        </h2></el-col
      >
      <el-col :span="4" style="margin-top: 100px">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/admin' }"
            >首页   <!-- :to动态指定导航的路径或对象 -->
          </el-breadcrumb-item>
          <!-- <el-breadcrumb-item :to="{ path: '/admin_edit' }"
            >修改商品页</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ path: '/admin_add' }"
            >添加商品页</el-breadcrumb-item
          > -->
        </el-breadcrumb>
      </el-col>
    </el-row>

    <el-row style="width: 100%">
       <!-- 侧边栏 -->
    <el-col style="width:10%;height:100%;" class="tac">
     <el-menu
      default-active="1" style="height:3800px"
      class="el-menu-vertical-demo"
      background-color="#7BA6D0"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1">
          <i class="el-icon-location"></i>
          <span slot="title">商品新增管理</span> <!-- 为 title 这个具名插槽插入内容 -->
      </el-menu-item>  
    </el-menu>
    </el-col>

      <el-col style="width: 90%; height: 850px; background-color: #f1f8fa">
        <el-row
          style="
            width: 100%;
            height: 60px;
            background-color: #545c64;
            color: #fff;
            text-align: center;
            line-height: 60px;
          "
        >
          <span style="margin: auto">添加商品信息</span>
        </el-row>
        <el-row style="margin-top: 10px">
          <form enctype="multipart/form-data"> <!-- 文件上传 正确地编码文件和其他表单字段数据 -->
            <table
              style="width: 60%; margin: auto"
              border="0"
              cellpadding="20"
              cellspacing="2"
              bgcolor="#BBD3EB"
            >
              <tr>
                <td
                  style="
                    width: 15%;
                    background-color: #e9f7fd;
                    text-align: center;
                  "
                >
                  商品名称
                </td>
                <td
                  height="30"
                  align="left"
                  bgcolor="#FFFFFF"
                  style="width: 90%"
                >
                  <input
                    type="text"
                    placeholder="请输入商品名称"
                    name="name"
                    value=""
                    v-model="formdata.name"
                  />
                </td>
              </tr>
              <tr>
                <td
                  style="
                    background-color: #e9f7fd;
                    text-align: center;
                    width: 10%;
                  "
                >
                  商品图片
                </td>
                <td
                  height="30"
                  align="left"
                  bgcolor="#FFFFFF"
                  style="width: 90%"
                >
                  <input type="file" name="img" @change="handleFileUpload" /> <!-- v-on监听change事件-->
                </td>
              </tr>
              <tr>
                <td
                  style="
                    width: 10%;
                    background-color: #e9f7fd;
                    text-align: center;
                  "
                >
                  商品编号
                </td>
                <td style="width: 90%">
                  <input
                    type="text"
                    placeholder="请输入商品编号"
                    name="totalnum"
                    value=""
                    v-model="formdata.totalnum"
                  />
                </td>
              </tr>
              <tr>
                <td
                  style="
                    width: 10%;
                    background-color: #e9f7fd;
                    text-align: center;
                  "
                >
                  商品单价
                </td>
                <td style="width: 90%">
                  <input
                    type="text"
                    placeholder="请输入商品价格"
                    name="price"
                    value=""
                    v-model="formdata.price"
                  />
                </td>
              </tr>
              <tr>
                <td
                  style="
                    width: 10%;
                    background-color: #e9f7fd;
                    text-align: center;
                  "
                >
                  商品描述
                </td>
                <td style="width: 90%">
                  <textarea
                    name="msg"
                    placeholder="请输入商品简介"
                    cols="100"
                    rows="6"
                    v-model="formdata.msg"
                  ></textarea>
                </td>
              </tr>
              <tr>
                <td
                  style="
                    width: 10%;
                    background-color: #e9f7fd;
                    text-align: center;
                  "
                >
                  库存
                </td>
                <td style="width: 90%">
                  <input
                    type="text"
                    placeholder="请输入商品库存"
                    name="inventory"
                    value=""
                    v-model="formdata.inventory"
                  />
                </td>
              </tr>
              <tr>
                <td
                  style="
                    width: 10%;
                    background-color: #e9f7fd;
                    text-align: center;
                  "
                >
                  商品分类cid
                </td>
                <td style="width: 90%">
                  <input
                    type="text"
                    placeholder="请输入商品分类cid"
                    name="cid"
                    value=""
                    v-model="formdata.cid"
                  />
                </td>
              </tr>
              <tr>
                <td height="30" align="center" bgcolor="#FFFFFF" colspan="2">
                  <input type="button" value="添加" @click="upload" />
                </td>
              </tr>
            </table>
          </form>
        </el-row>
      </el-col>
    </el-row>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      formdata: {
        name: "",
        totalnum: "",
        price: "",
        msg: "",
        inventory: "",
        cid: "",
        img: "",
      },
    };
  },
  methods: {
    handleFileUpload(event) {
      this.formdata.img = event.target.files[0]; //files文件列表;  event.target事件触发的目标元素,target 指触发change 事件的元素
    },
    upload() { 
      console.log(this.formdata);

// 将表单中的数据以键值对的形式存储在FormData对象中，以便后续可以通过HTTP请求将其发送到服务器。
      let mydata = new FormData(); //append()方法:将字段和它的值添加到 FormData 对象 mydata 中
      mydata.append("name", this.formdata.name);  //""里为我name绑定的，将表单中的"name"字段的值添加到mydata对象中
      mydata.append("totalnum", this.formdata.totalnum);
      mydata.append("price", this.formdata.price);
      mydata.append("msg", this.formdata.msg);
      mydata.append("inventory", this.formdata.inventory);
      mydata.append("cid", this.formdata.cid);
      mydata.append("img", this.formdata.img);
      mydata.append("shelves", "下架"); // 新增shelves字段，设置为下架状态
      console.log(this.formdata.img);
      // console.log(mydata);
      this.axios
        .post("/api/admin/addgoods", mydata, { //将mydata对象作为请求体发送
          headers: {
            "Content-Type": "multipart/form-data", //告诉服务器请求体中包含文件和表单字段。用于包含文件上传的表单数据
          },
        })
        .then((response) => { //处理异步操作成功时的回调函数
          console.log("上传成功：", response);
          this.$router.push('/admin')
        })
        .catch((error) => {
          console.error("上传失败：", error);
        });
    },
  },
};
</script>
<style>
table td {
  background-color: #ffffff;
}
table input {
  width: 600px;
  height: 30px;
}
</style>
